<template>
  <Breadcrumb class="m-breadcrumb">
    <Item>
      <router-link to="/home">
        <MIcon type="zhandianjieru" />
      </router-link>
    </Item>
    <template v-for="(item, index) in breadcrumbList">
      <template v-if="item.path && index !== breadcrumbList.length - 1">
        <Item :key="item.key">
          <router-link :to="item.path">{{ item.name }}</router-link>
        </Item>
      </template>
      <template v-else>
        <Item :key="item.key">
          <span>{{ item.name }}</span>
        </Item>
      </template>
    </template>
  </Breadcrumb>
</template>
<script>
import { Breadcrumb } from "ant-design-vue";
import MIcon from "@/components/MIcon/index";
import getMenuData from "@/components/MSider/menuData";
import matchBreadcrumb from "./matchBreadcrumb";

const { Item } = Breadcrumb;
export default {
  name: "m-breadcrumb",
  components: { Breadcrumb, Item, MIcon },
  data() {
    return {
      breadcrumbList: [],
    };
  },
  mounted() {
    const { path } = this.$route;
    const breadcrumbList = matchBreadcrumb(this.menuData, path);
    this.breadcrumbList = breadcrumbList;
  },
  computed: {
    menuData() {
      return getMenuData();
    },
  },
  watch: {
    $route: {
      handler(val) {
        const { path } = val;
        const breadcrumbList = matchBreadcrumb(this.menuData, path);
        this.breadcrumbList = breadcrumbList;
        console.log(this.breadcrumbList);
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
.m-breadcrumb {
  margin-bottom: 10px;
}
</style>
